<template>
    <div style="margin-top: 50px">
        <!--采购信息标题-->
        <el-row style="margin-right: 150px">
            <el-col :span="24"><div class="grid-content bg-purple-dark">
                <span style="font-size: 25px">客户订单统计</span>
            </div></el-col>
        </el-row>

        <!--表格-->
        <el-row style="margin-top: 25px;margin-left: 50px">
            <el-col :span="24">
                <div class="grid-content bg-purple-dark">
                    <el-table
                            :data="tableData"
                            width="50%"
                            height="200px"
                            highlight-current-row
                            @current-change="handleCurrentChange">
                        <el-table-column
                                property="name"
                                label="客户名称"
                                width="300">
                        </el-table-column>
                        <el-table-column
                                property="total"
                                label="销售总金额"
                                width="300">
                        </el-table-column>
                    </el-table>
                </div>
            </el-col>
        </el-row>

        <!--分页和查询还有按钮-->
        <el-row style="margin-top: 30px;margin-right: 400px">
            <el-col :span="14"><div class="grid-content bg-purple">
                <el-pagination
                        background
                        layout="prev, pager, next"
                        :total="total"
                        :page-size="pageSize"
                        @current-change="change">
                </el-pagination>
            </div></el-col>

            <el-col :span="10"><div class="grid-content bg-purple-light">
                <el-card class="box-card">
                    <span>查询销售统计信息</span><br>
                    <el-form ref="form" :model="form" label-width="80px" style="margin-left: 50px;margin-right: 50px;margin-top: 10px">
                        <el-form-item label="客户名称">
                            <el-input v-model="custom"></el-input>
                        </el-form-item>
                        <el-form-item label="起始日期">
                            <el-input v-model="start"></el-input>
                        </el-form-item>
                        <el-form-item label="结束日期">
                            <el-input v-model="end"></el-input>
                        </el-form-item>
                    </el-form>
                    <el-button type="primary" @click="init">查询</el-button>
                </el-card>
            </div></el-col>
        </el-row>


    </div>
</template>

<script>
    export default {
        name: "CustomCount",
        data(){
            return{
                //客户订单数据
                tableData:"",
                //分页参数
                current:1,
                pageSize:3,
                total:20,
                //动态查询
                custom:"",
                start:"",
                end:"",
            }
        },mounted() {
            this.init();
        },methods:{
            init(){
                this.axios.get("jxc/saleAndCustom/findByPageAndItemByCustom",{
                    params:{
                        current:this.current,
                        pageSize:this.pageSize,
                        customName:this.custom,
                        start:this.start,
                        end:this.end,
                    }
                }).then(
                    r => {
                        this.tableData = r.data.records;
                        this.total = r.data.total;
                    }
                )
            },
            change(current){
                this.current = current;
                this.init();
            }
        }
    }
</script>

<style scoped>

</style>